<template>
	<view class="ts-column">
		<view class="ts-column">
			<ts-button type="primary">确认</ts-button>
			<ts-button type="success">确认</ts-button>
			<ts-button type="warning">确认</ts-button>
			<ts-button type="error">确认</ts-button>
		</view>
		<view class="ts-row">
			<ts-button type="primary" :inverted="true">确认</ts-button>
			<ts-button type="success" :inverted="true">确认</ts-button>
			<ts-button type="warning" :inverted="true">确认</ts-button>
			<ts-button type="error" :inverted="true">确认</ts-button>
		</view>



		<ts-gap></ts-gap>


		<view class="ts-row">

			<ts-badge type="primary" text="12"></ts-badge>
			<ts-badge type="success" text="12"></ts-badge>
			<ts-badge type="warning" text="12"></ts-badge>
			<ts-badge type="error" text="12"></ts-badge>

		</view>
		<view class="ts-row">

			<ts-badge type="primary" text="12" size="small"></ts-badge>
			<ts-badge type="success" text="12" size="small"></ts-badge>
			<ts-badge type="warning" text="12" size="small"></ts-badge>
			<ts-badge type="error" text="12" size="small"></ts-badge>

		</view>
		<view class="ts-row">

			<ts-badge type="primary" text="12" :inverted="true"></ts-badge>
			<ts-badge type="success" text="12" :inverted="true"></ts-badge>
			<ts-badge type="warning" text="12" :inverted="true"></ts-badge>
			<ts-badge type="error" text="12" :inverted="true"></ts-badge>
		</view>

		<ts-gap></ts-gap>


		<view class="ts-row">

			<ts-tag type="primary" text="12" :closable="true"></ts-tag>
			<ts-tag type="success" text="12"></ts-tag>
			<ts-tag type="warning" text="12"></ts-tag>
			<ts-tag type="error" text="12"></ts-tag>

		</view>
		<view class="ts-row">

			<ts-tag type="primary" text="12" size="small"></ts-tag>
			<ts-tag type="success" text="12" size="small"></ts-tag>
			<ts-tag type="warning" text="12" size="small"></ts-tag>
			<ts-tag type="error" text="12" size="small"></ts-tag>

		</view>
		<view class="ts-row">

			<ts-tag type="primary" text="12" :inverted="true"></ts-tag>
			<ts-tag type="success" text="12" :inverted="true"></ts-tag>
			<ts-tag type="warning" text="12" :inverted="true"></ts-tag>
			<ts-tag type="error" text="12" :inverted="true"></ts-tag>
		</view>

		<ts-banner image="http://via.placeholder.com/750x350" :height="350"></ts-banner>

		<view class="ts-row">
			<ts-icon type="contact" size="60"></ts-icon>
			<ts-icon type="chatboxes" size="60"></ts-icon>
			<ts-icon type="chatbubble" size="60"></ts-icon>

		</view>

		<view class="ts-row">

			<ts-list>
				<ts-list-item title="标题" note="注释" :showBadge="true" badgeText="1.0" badgeType="error"></ts-list-item>
				<ts-list-item title="标题" note="注释" thumb="http://via.placeholder.com/80x80"></ts-list-item>
				<ts-list-item title="标题" note="注释" :showSwitch="true" :switchChecked="true"></ts-list-item>
				<ts-list-item title="标题" note="注释"></ts-list-item>
				<ts-list-item title="标题" note="注释"></ts-list-item>

			</ts-list>

		</view>

		<view class="ts-column">

			<view class="ts-row ts-flex-item">
				<ts-segmented-control :values="tabs" :current="currentTab" style-type="text" @clickItem="onClickItem"></ts-segmented-control>
			</view>
			<view v-if="currentTab==0">
				0
			</view>

			<view v-if="currentTab==1">
				1
			</view>

			<view v-if="currentTab==2">
				2
			</view>



		</view>
	</view>
</template>

<script>
	import tsGap from '@/components/teaset/components/ts-gap/ts-gap.vue'
	import tsButton from '@/components/teaset/components/ts-button/ts-button.vue'
	import tsBadge from "@/components/teaset/components/ts-badge/ts-badge.vue"
	import tsTag from "@/components/teaset/components/ts-tag/ts-tag.vue"
	import tsBanner from "@/components/teaset/components/ts-banner/ts-banner.vue";
	import tsIcon from "@/components/teaset/components/ts-icon/ts-icon.vue";
	import tsList from "@/components/teaset/components/ts-list/ts-list.vue";
	import tsListItem from "@/components/teaset/components/ts-list/ts-list-item.vue";
	import tsSegmentedControl from '@/components/teaset/components/ts-segmented-control/ts-segmented-control.vue';
	export default {
		components: {
			tsGap,
			tsButton,
			tsBadge,
			tsTag,
			tsBanner,
			tsIcon,
			tsList,
			tsListItem,
			tsSegmentedControl
		},
		data() {
			return {
				currentTab: 0,
				tabs: ['A', 'B', 'C']

			}
		},
		onLoad() {

		},
		methods: {
			onClickItem(index) {
				if (this.currentTab !== index) {
					this.currentTab = index;
					// this.loadData();
				}
			}
		}
	}
</script>

<style>

</style>
